<template>
	<h1>app</h1>
	<p>{{ num }}</p>
	<button @click="update">update</button>
	<button @click="num++">update</button>
	<p>{{ person.name }} {{ person.age }}</p>
	<button @click="update1">update1</button>
	<p>{{ age }}</p>

	<Child :age="age" @setAge="person.age++" />
</template>

<script>
import {
	reactive,
	readonly,
	ref,
	watch,
	computed,
	onMounted,
	// onBeforeUnmount,
} from "vue";
import Child from "./Child.vue";

export default {
	name: "App",
	setup() {
		// 初始化流程时触发，相当于beforeCreate和created生命周期函数
		console.log("setup()", this);

		// 生命周期
		onMounted(() => {
			console.log("onMounted111");
		});

		onMounted(() => {
			console.log("onMounted222");
		});

		// reactive定义多个响应式数据
		const person = reactive({
			name: "haijing",
			age: 58,
		});

		// const readonlyPerson = readonly({
		// 	name: "haijing",
		// 	age: 58,
		// });

		// ref定义单个响应式数据
		const num = ref(0);

		// 定义methods
		const update = () => {
			num.value++;
		};

		const update1 = () => {
			person.age++;
		};

		// 定义监视属性
		watch(
			num,
			(newVal, oldVal) => {
				console.log("watch", newVal, oldVal);
			},
			{
				// deep: true,
				// immediate: true
			}
		);

		// 计算属性
		// 只读
		const age = computed(() => {
			return person.age + "岁";
		});
		// 可读可写
		// computed({
		// 	get() {},
		// 	set() {},
		// });

		// 返回值是一个对象，对象里面的数据模板页面可以直接使用
		return {
			num,
			update,
			person,
			update1,
			age,
		};
	},
	components: {
		Child,
	},
};
</script>

<style></style>
